<template>
    <div style="height: 100%;width: 100%">
        <h4 class="page-name">挑衅样式预判</h4>
        <div class="params-form">
            <el-form :inline="true" :model="formParams" class="demo-form-inline">
                <el-form-item label="区域">
                    <el-select v-model="formParams.region" placeholder="选择区域">
                        <el-option value="">选择区域</el-option>
                        <el-option v-for="(val,key) in baseData.regionList" :key="key" :label="val" :value="key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="船舰名称">
                    <el-select v-model="formParams.boatasName" placeholder="选择船舰">
                        <el-option value="">选择船舰</el-option>
                        <el-option v-for="(val,key) in baseData.equipList" :key="key" :label="val" :value="key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="formParams.boatasType" placeholder="选择类型">
                        <el-option value="">选择类型</el-option>
                        <el-option v-for="(val,key) in baseData.typeList" :key="key" :label="val" :value="key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始日期">
                    <el-date-picker
                            v-model="formParams.params.beginTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束日期">
                    <el-date-picker
                            v-model="formParams.params.endTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getEquipData">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getEquipData">查看甘特图</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="equip-table" v-show="equipTableVisible">
            <el-table
                    :data="equipList.slice((currentAnalysisPage - 1) * 4,currentAnalysisPage * 4)"
                    style="width: 100%"
                    :stripe="true"
                    :row-class-name="tableRowClassName"
                    @row-click="changeTableRow">
                <el-table-column
                        label="ID"
                        prop="id">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="船舰名称">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="showdetails(scope.row.details)" type="text" size="small">查看详情<i
                                class="el-icon-arrow-right"></i></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    layout="prev, pager, next"
                    :total="equipList.length"
                    :page-size="pageSize"
                    @current-change="analysisTablePageChange"
                    :current-page="currentAnalysisPage">
            </el-pagination>
        </div>
        <div class="equip-detail" v-show="equipDetaiVisible">
            <p @click="backTotable" style="background: #5B82BC;text-align: left;"><i class="el-icon-arrow-left"></i>查看详情
            </p>
            <div style="max-height: 400px;overflow:auto;">
                <div v-for="item in equipDetailList" :key="item.id" class="equip-detail-item">
                    <div class="circle"></div>
                    <p class="p-title" style="margin-top: -8px;">{{item.time}}</p>
                    <p class="p-title">{{item.boatasName}}</p>
                    <p>事件类型：{{item.eventType}}</p>
                    <p>位置：{{item.region}}</p>
                    <p>{{item.detail}}</p>
                </div>
            </div>
        </div>
        <div id="mapDetail" v-show="mapDetailVisible">
            <p class="p-title">{{mapDetail.time}}</p>
            <p class="p-title">{{mapDetail.name}}</p>
            <p>事件类型：{{mapDetail.type}}</p>
            <p>位置：{{mapDetail.region}}</p>
            <p>{{mapDetail.detail}}</p>
        </div>
    </div>

</template>

<script>
    import shipImg from "./../assets/imgs/navigation-log/ship.png";
    import ship2Img from "./../assets/imgs/navigation-log/ship2.png";
    import * as request from "../http/request.js"
    import * as Cesium from 'cesium/Cesium'
    import 'cesium/Widgets/widgets.css'
    export default {
        name: 'dataAnalysis',
        data() {
            return {
                value1: '',
                baseData: {
                },
                formParams: {
                    boatasName: '',
                    region: '',
                    boatasType: '',
                    params: {
                        beginTime: '',
                        endTime: ''
                    }
                },
                //船舰列表
                equipList:[],
                selectedRowData:[],
                /*equipList: [
                    {
                        id: 7,
                        name: 'p-8a',
                        details: [
                            {
                                id: 1,
                                time: '2020-02-01 19:00',
                                name: 'p-8a',
                                eventType: '事件类型',
                                region: '南海',
                                detail: '关于这个事件的一段描述',
                                type: '穿航海峡'
                            },
                            {
                                id: 2,
                                time: '2020-02-02 19:00',
                                name: 'p-8a',
                                eventType: '事件类型',
                                region: '南海',
                                detail: '关于这个事件的一段描述',
                                type: '穿航海峡'
                            },
                            {
                                id: 3,
                                time: '2020-02-03 19:00',
                                name: 'p-8b',
                                eventType: '事件类型',
                                region: '南海',
                                detail: '关于这个事件的一段描述',
                                type: '穿航海峡'
                            },
                            {
                                id: 4,
                                time: '2020-02-03 19:00',
                                name: 'p-8b',
                                eventType: '事件类型',
                                region: '南海',
                                detail: '关于这个事件的一段描述',
                                type: '穿航海峡'
                            },
                            {
                                id: 5,
                                time: '2020-02-03 19:00',
                                name: 'p-8b',
                                eventType: '事件类型',
                                region: '南海',
                                detail: '关于这个事件的一段描述',
                                type: '穿航海峡'
                            }
                        ],
                    },
                    {
                        id: 1,
                        name: '98-k',
                        details: [
                            {
                                id: 1,
                                time: '2020-02-01 19:00',
                                name: 'p-8a',
                                eventType: '事件类型',
                                region: '南海',
                                detail: '关于这个事件的一段描述'
                            },
                            {
                                id: 2,
                                time: '2020-02-02 19:00',
                                name: 'p-8a',
                                eventType: '事件类型',
                                region: '南海',
                                detail: '关于这个事件的一段描述'
                            },
                            {
                                id: 3,
                                time: '2020-02-03 19:00',
                                name: 'p-8b',
                                eventType: '事件类型',
                                region: '南海',
                                detail: '关于这个事件的一段描述'
                            }
                        ],
                    },
                    {
                        id: 3,
                        name: 'm614',
                        details: [
                            {
                                id: 1,
                                time: '2020-02-01 19:00',
                                name: 'p-8a',
                                eventType: '事件类型',
                                region: '南海',
                                detail: '关于这个事件的一段描述'
                            },
                            {
                                id: 2,
                                time: '2020-02-02 19:00',
                                name: 'p-8a',
                                eventType: '事件类型',
                                region: '南海',
                                detail: '关于这个事件的一段描述'
                            },
                            {
                                id: 3,
                                time: '2020-02-03 19:00',
                                name: 'p-8b',
                                eventType: '事件类型',
                                region: '南海',
                                detail: '关于这个事件的一段描述'
                            }
                        ],
                    }
                ],*/
                timelineList: [],
                equipTableVisible: false,
                equipDetaiVisible: false,
                timelineVisible: false,
                equipDetailList: [
                    {
                        id: 3,
                        time: '2020-02-03 19:00',
                        name: 'p-8b',
                        eventType: '事件类型',
                        region: '南海',
                        detail: '关于这个事件的一段描述'
                    }
                ],
                viewer: null,
                flightData: [{
                    craft: 'ship',
                    id: 11,
                    date: '2016-05-02',
                    name: 'p8-a',
                    country: '美国',
                    flight: [
                        {
                            coordinate: [110.4738, 15.9426],
                            rotation: 130,
                            detail: {
                                id: 1,
                                time: '2020-02-01 19:00',
                                name: 'p-8a',
                                eventType: '事件类型',
                                region: '南海',
                                detail: '关于这个事件的一段描述关于这个事件的一段描述',
                                type: '穿航海峡'
                            }
                        },
                        {
                            coordinate: [111.9418, 16.9192],
                            rotation: 60,
                            detail: {
                                id: 1,
                                time: '2020-02-01 19:00',
                                name: 'p-8a',
                                eventType: '事件类型',
                                region: '南海',
                                detail: '关于这个事件的一段描述关于这个事件的一段描述',
                                type: '穿航海峡'
                            }
                        },
                        {
                            coordinate: [116.09, 17.96],
                            rotation: 10,
                            detail: {
                                id: 1,
                                time: '2020-02-01 19:00',
                                name: 'p-8a',
                                eventType: '事件类型',
                                region: '南海',
                                detail: '关于这个事件的一段描述关于这个事件的一段描述',
                                type: '穿航海峡'
                            }
                        }]
                },
                  ],
                shipPoints:[{
                    id: 0,
                    coordinate: [110.4738, 15.9426],
                    details: {
                        ship_name: '船名',
                        ship_type: '船中文名',
                        flightLine: '航线编号',
                        pos_datetime: '定位时间'
                    }
                },{
                    id:1,
                    coordinate: [113.4738, 16.9426],
                    details: {
                        ship_name: '船名',
                        ship_type: '船中文名',
                        flightLine: '航线编号',
                        pos_datetime: '定位时间'
                    }
                }
                ],
                currentAnalysisPage: 1,
                pageSize: 4,
                mapDetailVisible: false,
                mapDetail: {
                    /*id: 1,
                    time: '2020-02-01 19:00',
                    name: 'p-8a',
                    eventType: '事件类型',
                    region: '南海',
                    detail: '关于这个事件的一段描述关于这个事件的一段描述',
                    type: '穿航海峡'*/
                },
                //时间轴相关
                start:  Cesium.JulianDate.fromDate(new Date())
            }
        },
        mounted() {
            // viewer.timeline.container.style.visibility = 'visible'
            viewer.entities.removeAll()
            this.commonjs.changeto2D()
            this.getBaseData()
            this.getEquipData()
            this.getShipPoints()
        },
        methods: {
            //加载字典
            getBaseData() {
                let _self = this
                request.getBaseData().then(function (res) {
                    _self.baseData = res.data.baseData
                })
            },
            //获取装备表格信息
            getEquipData() {
                let _self = this
                request.queryBoatas(this.formParams).then(function (res) {
                    _self.equipList = res.data.equipList
                    _self.equipTableVisible = true
                    _self.timelineList = res.data.equipList[0].details
                    _self.timelineVisible = true

                })
                // request.queryTrack().then(function (res) {
                //     _self.handleFlightData(res.data)
                // })
            },
            //显示船舰详情--表格之后
            showdetails(details) {
                this.equipDetailList = details
                this.equipTableVisible = false
                this.equipDetaiVisible = true
                viewer.entities.removeAll();
                this.handleFlightData()
            },
            //返回表格
            backTotable() {
                this.equipDetaiVisible = false
                this.equipTableVisible = true

            },
            //表格换页
            analysisTablePageChange(e) {
                this.currentAnalysisPage = e;
            },
            changeTableRow(row) {
                this.selectedRowData = row;
                this.timelineList = []
                this.timelineList = row.details

            },
            tableRowClassName({row, rowIndex}) {
                if (row.id === this.selectedRowData.id) {
                    return 'highlight-row';
                }
                return '';
            },
            //加载所有船的点
            getShipPoints() {
                console.log(this.shipPoints)
                for (let i = 0; i< this.shipPoints.length; i++){
                    viewer.entities.add({
                        name: "船舶点",
                        position: Cesium.Cartesian3.fromDegrees(this.shipPoints[i].coordinate[0], this.shipPoints[i].coordinate[1]),
                        billboard: {
                            //图标
                            image: ship2Img,
                            width: 29,
                            height: 15,
                        },
                    });
                }
            },
            //渲染航迹
            handleFlightData(data) {
                console.log(data)
                data = this.flightData
                for (let i = 0; i < data.length; i++) {
                    let flight = data[i].flight
                    let lineData = [];
                    for (let i = 0; i < flight.length; i++) {
                        lineData.push(flight[i].coordinate[0]);
                        lineData.push(flight[i].coordinate[1]);
                    }
                    for (let i = 1; i < flight.length; i++) {
                        viewer.entities.add({
                            name: "航迹坐标点",
                            position: Cesium.Cartesian3.fromDegrees(flight[i].coordinate[0], flight[i].coordinate[1]),
                            billboard: {
                                //图标
                                image: shipImg,
                                width: 29,
                                height: 15,
                                rotation: flight[i].rotation,
                            },
                            attribute: {
                                /*text: flight[i].detail.time + '\n' + flight[i].detail.name + '\n' + flight[i].detail.type + '\n' + flight[i].detail.region + '\n' + flight[i].detail.detail*/
                                detail: flight[i].detail
                            }
                        })
                    }
                    viewer.entities.add({
                        name: "航迹起点",
                        position: Cesium.Cartesian3.fromDegrees(flight[0].coordinate[0], flight[0].coordinate[1]),
                        billboard: {
                            //图标
                            image: ship2Img,
                            width: 29,
                            height: 15,
                            rotation: flight[0].rotation,
                        },
                        attribute: {
                            // details:data[i].detail
                        }
                    });
                    viewer.entities.add({
                        name: "航迹线",
                        polyline: {
                            positions: Cesium.Cartesian3.fromDegreesArray(lineData),
                            width: 1,
                            arcType: Cesium.ArcType.RHUMB,
                            material: new Cesium.PolylineDashMaterialProperty({
                                color: Cesium.Color.fromCssColorString('#fff'),
                            }),
                        },
                    })
                }
                console.log(data)
                let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
                let _self = this;
                handler.setInputAction(function (e) {
                    let currentTarget = viewer.scene.pick(e.position);
                    if (viewer.scene.pickPositionSupported && Cesium.defined(currentTarget)) {
                        if (currentTarget.id.name == '航迹坐标点') {
                            _self.mapDetailVisible = true;
                            _self.mapDetail = currentTarget.id.attribute.detail
                            console.log(_self.mapdetail)
                            let element = document.getElementById('mapDetail');
                            //笛卡尔坐标转为屏幕坐标
                            // let pos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, e.position);
                            element.style.top = (e.position.y + 10) + 'px';
                            element.style.left = (e.position.x + 10) + 'px';
                        } else if  (currentTarget.id.name == '船舶点'){

                        }
                    } else {
                        _self.mapDetail = {};
                        _self.mapDetailVisible = false;
                    }
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            },
            //初始化所有飞机 点
            initEquipPoints(data) {
                for (let i = 0; i < data.length; i++) {
                    let flight = data[i].flight
                    let lineData = [];
                    for (let i = 0; i < flight.length; i++) {
                        lineData.push(flight[i].coordinate[0]);
                        lineData.push(flight[i].coordinate[1]);
                    }
                    for (let i = 1; i < flight.length; i++) {
                        viewer.entities.add({
                            name: "航迹坐标点",
                            position: Cesium.Cartesian3.fromDegrees(flight[i].coordinate[0], flight[i].coordinate[1]),
                            billboard: {
                                //图标
                                image: shipImg,
                                width: 29,
                                height: 15,
                                rotation: flight[i].rotation,

                            },
                            attribute: {
                                /*text: flight[i].detail.time + '\n' + flight[i].detail.name + '\n' + flight[i].detail.type + '\n' + flight[i].detail.region + '\n' + flight[i].detail.detail*/
                                detail: flight[i].detail
                            }
                        })
                    }
                    viewer.entities.add({
                        name: "航迹起点",
                        position: Cesium.Cartesian3.fromDegrees(flight[0].coordinate[0], flight[0].coordinate[1]),
                        billboard: {
                            //图标
                            image: ship2Img,
                            width: 29,
                            height: 15,
                            rotation: flight[0].rotation,
                        },
                    });
                }
            }
        },
    }
</script>

<style lang="scss">
    $item-bg-color: rgba(0, 78, 126, .8);
    $item-bg-color2: #5B82BC;
    $text-color: #ffffff;

    .page-name{
        position: absolute;
        top: 30px;
        left: 30px;
        padding: 5px 30px 5px 10px;
        border-radius: 3px;
        color: #fff;
        background: url("../assets/imgs/navigation-log/shijianzhou_bg.png");
    }
    /*右上角装备表格*/
    .equip-table {
        position: absolute;
        top: 100px;
        left: 30px;
        width: 300px;
        background: $item-bg-color2;
        --el-table-border-color: none;
        font-size: 12px;

        .el-button--text {
            color: #64DCFF;
            font-size: .8rem;
        }

        .table-title {
            float: left;
            padding: 6px;
            color: #fff;
            font-size: 1.2rem;
        }

        .el-table .el-table__cell {
            padding: 0;
        }

        /*分页*/
        .el-pagination {
            width: 100%;
            text-align: center;
        }

        .el-pagination__total {
            color: #fff;
        }

        .el-pagination button:disabled, .el-pagination .btn-next {
            color: #fff;
        }

        .el-pager li {
            color: #fff;
            background: $item-bg-color2;
            border: none;
        }

        .el-pager li.active {
            color: $text-color;
            background: #009FFF;
        }

        .el-pager li.btn-quicknext, .el-pager li.btn-quickprev {
            color: $text-color;
        }

        .el-pagination .btn-next, .el-pagination .btn-prev {
            color: $text-color;
            background: $item-bg-color2;
        }

        /*    表格编辑*/
        td .el-input__inner {
            height: 24px;
            line-height: 24px;
            color: #999999;
            background: none;
        }

        /*    底部边框*/
        .el-table::before {
            height: 0;
        }

        .el-dialog__title {
            color: $text-color;
        }

        .el-table tr {
            background-color: #1E3456;
            color: $text-color;
        }

        .el-table th.el-table__cell {
            background-color: #025C93;
            padding: 4px 0px;
        }

        /*鼠标悬浮背景*/
        .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
            background-color: #005081;
        }

        /*斑马纹*/
        .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
            background: #243E66;
        }

        /*border*/
        .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
            border: none;
        }
        .el-table .highlight-row{
            color:yellow;
        }

    }

    .equip-detail {
        position: absolute;
        top: 06px;
        left: 30px;
        width: 300px;
        background: #0F2445;
        color: #fff;

        .circle {
            width: 10px;
            height: 10px;
            float: right;
            margin-left: -15px;
            background-color: #008DE2;
            border-radius: 50%;
        }

        .equip-detail-item {
            display: flex;
            flex-wrap: wrap;
            -ms-flex-line-pack: justify;
            align-content: space-between;
            flex-direction: column;
            margin: 0 15px;
            padding-left: 10px;
            border-left: 1px dashed #008DE2;

            p {
                padding: 2px 0;
                margin: 0;
                text-align: left;
                font-size: 10px;
            }

            .p-title {
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #FFF3E9;
            }
        }
    }
    .timeline {
        position: absolute;
        bottom: 20px;
        width: 100%;
        overflow: auto;
        color: #fff;
        padding-bottom: 5px;
        /* .el-timeline {
             display: flex;
             .el-timeline-item__node--normal {
                 bottom: 1px;
                 background: #1D498B;
             }
             .el-timeline-item__tail {
                 position: absolute;
                 bottom: 4px;
                 width: 100%;
                 border-bottom: 5px dashed #1D498B;
             }
         }*/
        .circle {
            position: absolute;
            bottom: 0px;
            width: 10px;
            height: 10px;
            background-color: #008DE2;
            border-radius: 50%;
        }

        .timeline-item {
            display: flex;
            -ms-flex-line-pack: justify;
            align-content: space-between;
            flex-direction: column;
            padding-left: 10px;
            border-bottom: 1px dashed #008DE2;
            min-width: 200px;
            max-height: 200px;
            overflow: auto;
            p {
                padding: 2px 0;
                margin: 0;
                text-align: left;
                font-size: 14px;
            }

            .p-title {
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #FFF3E9;
                background: url("./../assets/imgs/navigation-log/shijianzhou_bg.png");
                background-size: 100% 100%;
            }
        }
    }

    /*    参数表单*/
    .params-form {
        position: absolute;
        right: 20px;

        .el-form-item__label {
            color: #fff;
        }

        .el-date-editor.el-input, .el-date-editor.el-input__inner {
            width: 135px;
        }
    }

    #mapDetail {
        position: absolute;
        height: auto;
        max-width: 350px;
        max-height: 500px;
        width: auto;
        padding: 5px;
        background: #0F2445;
        /*background-size: 100% 100%;*/
        color: #fff;
        font-size: 0.8rem;
        text-align: left;
        white-space: pre-wrap;

        p {
            margin: 1px 0;
        }

        .p-title {
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFF3E9;
        }

    }

    /* 定义滚动条样式 */
    ::-webkit-scrollbar {
        width: 5px;
        height: 6px;
        background-color: #fff;
    }

    // /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 0px rgba(240, 240, 240, .8);
        background: $item-bg-color;
    }

    // /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 0px rgba(240, 240, 240, .8);
        background-color: #33B2FF;
        border-radius: 4px;
    }

</style>

